<template>
	<view class="carousel">
		<image :src="info.list[currentIndex-1]['image']" @click="clickItem(info.list[currentIndex-1])" class="loaded" mode="aspectFill" :style="'width: '+imgWidth+';height: '+imgHeight+';'" v-if="info.list.length == 1"></image>
		<swiper circular="true" duration="400" touchable :autoplay="true" @change="swiperchange" class="swiper" :style="'width: '+imgWidth+';height: '+imgHeight+';'" v-else>
			<swiper-item v-for="(item, index) in info.list" :key="index" class="swiper-item" @click="clickItem(item)">
				<view class="image-wrapper">
					<image :src="item.image" class="loaded" mode="aspectFill" :style="'width: '+imgWidth+';height: '+imgHeight+';'"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="dots" v-if="info.list.length > 1">
			<text>{{currentIndex}}</text> / <text>{{info.list.length}}</text>
		</view>
		<view class="title" v-if="info.list[currentIndex-1][field]">
			<text>{{ info.list[currentIndex-1][field] }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 1,
				imgWidth: '100%',
				imgHeight: '100px',
				field: 'title',
			}
		},
		props: {
			info: {
				type: Object
			}
		},
		created() {
			this.imgWidth = this.info.imgWidth
			this.imgHeight = this.info.imgHeight
			this.field = this.info.field
		},
		methods: {
			swiperchange(e) {
				this.currentIndex = e.detail.current + 1
			},		
			clickItem(data) {
				if(data.link && data.link!="" && data.link.indexOf("pages/") > -1) {
					uni.navigateTo({
						url: data.link
					})
				}
			}
		}
	}
</script>
<style scoped lang="scss">
	.carousel {
		position: relative;
		overflow: hidden;
		.dots {
			height: 40upx;
			line-height: 40upx;
			font-size: 24upx;
			text-align: center;
			background-color: rgba(0, 0, 0, .2);
			position: absolute;
			bottom: 10rpx;
			right: 0;
			z-index: 20;
			color: #FFFFFF;
			padding: 0 20upx;
			border-radius: 20upx 0 0 20upx;
		}
	}
	
	.title {
		position: absolute;
		bottom: 0;
		width: 96%;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 2%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		background-color: rgba(0, 0, 0, .3);
		color: #FFFFFF;
		font-size: 24rpx;
		z-index: 19;
	}

	.swiper {
		width: 100%;
		height: auto;
		z-index: 100;
	}

	.loaded {
		width: 100%;
		height: auto;
		display: block;
	}

	.video_btn {
		width: 165upx;
		height: 60upx;
		background: url() no-repeat;
		background-size: 100% 100%;
		position: absolute;
		bottom: 20upx;
		left: 50%;
		transform: translateX(-50%);
		text-align: right;
		line-height: 60upx;
		padding: 0 20upx;
		font-size: 24upx;
		letter-spacing: 2upx;

		&:active {
			opacity: .8;
		}
	}
</style>
